import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Avatar, Button, Checkbox, Form, Input, Menu, Modal, Space } from "antd"
import { Header } from "antd/lib/layout/layout"
import { useState } from "react";

function UserHeader() {
    return (
        <Header className="header">
            <div
                style={{
                    display: "flex",
                    justifyContent: "space-between"
                }}
            >
                <div className="log"></div>
                <div className="right">
                    <LoginModal />
                </div>
            </div>
        </Header>
    )
}

function LoginModal() {
    const [isModalVisible, setModalVisible] = useState(false);
    const close = () => {
        setModalVisible(false);
    };
    const open = () => {
        setModalVisible(true);
    };

    return (
        <>
            <Button type="link" onClick={open}>
                <Avatar size={48} icon={<UserOutlined />} />
            </Button>
            <Modal
                width={400}
                style={{
                    top: "30%"
                }}
                title="登录"
                onCancel={close}
                visible={isModalVisible}
                footer={false}
            >
                <LoginForm />
            </Modal>
        </>
    )
}

function LoginForm() {
    const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
    };
    const onFinish = () => {
        alert("yes");
    }

    return (
        <Form name="login" {...layout} onFinish={onFinish}>
            <Space direction="vertical" style={{width: "100%"}}>
                <Form.Item
                    name="user"
                    colon={false}
                    label={<UserOutlined />}
                    rules={[{ required: true, min: 6, max: 16, message: "用户名必须大于等于6位，小于等于16位" }]}
                >
                    <Input placeholder="用户名/手机" />
                </Form.Item>
                <Form.Item
                    name="pwd"
                    colon={false}
                    label={<LockOutlined />}
                    rules={[{ required: true, min: 6, max: 16, message: "密码必须处于6~16位" }]}
                >
                    <Input.Password placeholder="密码" />
                </Form.Item>
                <Form.Item
                    name="remerber"
                    wrapperCol={{offset: 2}}
                >
                    <Checkbox>7天之内自动登录</Checkbox>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 2, span: 20 }}>
                    <Button block type="primary" htmlType="submit" form="login">登录</Button>
                </Form.Item>
            </Space>
        </Form>
    )
}


export default UserHeader;